<?php if(!defined('IN_FIRADIO')) {header('HTTP/1.1 403 Forbidden');exit('<h1>Access Denied</h1>');}?>
<?php $GLOBALS['script'][] = function() {?><script>
vue.data.disabled = false;
vue.data.api_status = {};
vue.data.api_status.hosts = {};
vue.data.api_config = {};
vue.data.config = {};
vue.data.config.autoreload = {};
vue.data.config.autoreload.interval = 5000;
vue.data.config.queue_status_list = {};
if (typeof(vue.watch) !== 'object') vue.watch = {};
vue.watch['config.autoreload.interval'] = function () {
    // console.log(newVal);
    clearInterval(vue.data.config.autoreload.obj);
    if (vue.data.config.autoreload.interval > 0) {
        vue.data.config.autoreload.obj = setInterval(function () {
            vue.data.form.is_autoreload = 1;
            vue.methods.submit_bnb_status();
        }, vue.data.config.autoreload.interval);
    }
};
var submit_after_result = function (that) {
    that.disabled = false;
};
vue.methods.submit_bnb_status = function () {
    const that = this;
    const form = window.clone(vue.data.form);
    vue.data.form.is_autoreload = 0;
    that.ApiPost('/panel/ocr/status.php', form).then(function (data) {
        vue.data.api_status = data.data;
        setTimeout(function() {
            if (jQuery("ul.nav-tabs").children(".active").length === 0) {
                jQuery("ul.nav-tabs li:first a").click();
            }
        }, 0);
        if (vue.data.api_status.hosts) {
            for (var key in vue.data.api_status.hosts) {
                const host = vue.data.api_status.hosts[key];
                for (var key in host.dbs) {
                    const db = host.dbs[key];
                    db.count_sum = count_sum_status(db.status);
                }
            }
        }
        submit_after_result(that);
    }, function (data) {
        console.log('reject:', data);
        submit_after_result(that);
    }).catch(function (reason) {
        console.log('catch:', reason);
        submit_after_result(that);
    })
};
vue.methods.setTimeout = function (fun, timeout) {
    setTimeout(fun, timeout);
};
vue.methods.status_percent = function (c_sub, c_sum) {
    if (c_sum === 0) return '-';
    return (Math.round(c_sub * 1000 / c_sum) / 10) + '%';
};
vue.mounted = function () {
    vue.methods.submit_bnb_status();
    vue.watch['config.autoreload.interval']();
};
function count_sum_status(statusList) {
    var ret = [];
    for (var key in statusList) {
        const status_count_list = statusList[key].count_list;
        for (var count in status_count_list) {
            if (ret[count]) {
                ret[count] += status_count_list[count];
            } else {
                ret[count] = status_count_list[count];
            }
        }
    }
    return ret;
    alert(JSON.stringify(ret));
}
</script><?php }?>

<!-- Custom Tabs -->
<form v-on:submit="submit_bnb_status" onsubmit="return false" :disabled="disabled">
<div class="nav-tabs-custom">
    <ul class="nav nav-tabs">
        <li v-for="host of api_status.hosts" :dbhost="host.id" style="display: none;">
            <a :href="host.href" data-toggle="tab">{{host.id}}状态</a>
        </li>
        <li class="pull-left" style="font-size: 14px; padding: 8px;">
        </li>
        <li class="pull-right" style="font-size: 14px; padding: 8px;">
            <select v-model="config.autoreload.interval" style="">
                <option value="1000">自动刷新/1s</option>
                <option value="3000">自动刷新/3s</option>
                <option value="5000">自动刷新/5s</option>
                <option value="0">手动刷新</option>
            </select>
            <a href="javascript:void(0)" v-on:click="form={};submit_bnb_status();"
            class="fa fa-fw fa-refresh" style="font-size: 16px; display: inline;"></a>
        </li>
    </ul>

    <div class="tab-content">
        <div v-for="host of api_status.hosts" class="tab-pane" :id="host.tab">
            <div class="row">
                <div class="col-xs-12 col-md-12 col-lg-12" v-for="db of host.dbs">
                    <table class="table table-bordered table-striped dataTable">
                        <tr align="center">
                            <td colspan="10">
                                <div class="pull-left header">
                                    <i class="fa fa-th"></i>
                                    <font>{{db.title}}状态统计</font>
                                </div>
                            </td>
                        </tr>
                        <tr align="center">
                            <td>状态码</td>
                            <td v-if="0">平均每秒</td>
                            <td v-for="field of api_status.count_fields">{{field.title}}</td>
                        </td>
                        <tr v-for="stat of db.status" align="center">
                            <td>{{stat.title}}</td>
                            <td v-if="0">{{Math.round(stat.count_list[0]/60)}}</td>
                            <td v-for="(c,key) in stat.count_list">
                                <table width="100%">
                                    <tr align="center">
                                        <td width="50%" bgcolor="#eeffff">{{c}}</td>
                                        <td width="50%" bgcolor="#eeeeff">{{status_percent(c,db.count_sum[key])}}</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr align="center">
                            <td>合计</td>
                            <td v-for="(c,key) in db.count_sum">
                                <table width="100%">
                                    <tr align="center">
                                        <td width="50%" bgcolor="#eeffff">{{c}}</td>
                                        <td width="50%" bgcolor="#eeeeff">{{Math.round(c*10/api_status.count_fields[key].second)/10}}</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>

                </div>
            </div>
            <!-- /.tab-content -->
        </div>
        <!-- nav-tabs-custom -->
    </div>
    <!-- /.col -->

</div>
</form>
